 
<template>
  <div class="doms">
    <!-- 3D大屏 -->
    <div id="three-frame"></div>

    <!-- 數據 -->
    <!-- <div >1111</div> -->
    <div id="dataViewBox" class="echartbox">
      <div style="font-size: 30px; margin-top: 30px; margin-left: 60px;">项目完成指标</div>
      
      <div style="display: flex; font-size: 20px; margin-top: 20px;">
        <div style="margin-left: 50px;">质量指标占比:  </div>
        <div class="triangle-top"></div>
        <div style="color: #0FEEF6;">55%</div>
      </div>

      <div style="display: flex; font-size: 20px; margin-top: 10px;">
        <div style="margin-left: 50px;">指令指标占比:  </div>
        <div class="triangle-top"></div>
        <div style="color: #0FEEF6;">66%</div>
      </div>

      <div style="display: flex; font-size: 20px; margin-top: 10px;">
        <div style="margin-left: 50px;">电力指标占比:  </div>
        <div class="triangle-bottom"></div>
        <div style="color: #0FEEF6;">77%</div>
      </div>

      <div style="display: flex; font-size: 20px; margin-top: 10px;">
        <div style="margin-left: 50px;">火力指标占比:  </div>
        <div class="triangle-bottom"></div>
        <div style="color: #0FEEF6;">88%</div>
      </div>
      
    </div>
  </div>
</template>

<script lang="ts" setup>
// 圆盘地盘 地盘动画----------------------------------------3D 地图
import Render3DMode from "./useThree1";
import { onMounted } from "vue";
// import { getGeoJsonall } from './getGeoJson';
import useFileLoader from "./hooks/useFileLoader.js";
const { requestData } = useFileLoader();
let { initMaps, setMapDom, setmapborder } = Render3DMode("three-frame", "dataViewBox");

onMounted(async () => {
  // 画地图所有
  initMaps();
  let provinceData = await requestData("遵义市.json");
  let provinceBoundary = await requestData("遵义市边界线.json");
  // console.log('provinceData',provinceData)
  setMapDom(provinceData.features); // 画 地图
  setmapborder(provinceBoundary.features); // 画 遵义市边界线
});
</script>

<style>
.doms {
  margin-top: 30px;
  width: 1800px;
  height: 900px;
  background: #51c1e651;
  background: #8aaafb;
  border: 2px solid #8aaafb; /* 添加 2px 的黑色实线边框 */
}

.map-32-label {
  padding: 10px;
  color: #fff;
  justify-content: center;
  align-items: center;
  height: 20px;
  background: url(../../assets/images/bg02.png) no-repeat;
  background-size: 100% 100%;
  font-size: 15px; /* 适当的字体大小 */
  font-family: "Arial", sans-serif; /* 使用现代清晰的字体 */
  font-weight: bold;
}

.data_box {
  width: 200px;
  height: 300px;
  background: #ffffff96;
  /* display: absolute; */
  float: left;
  z-index: 9999999;
  margin-top: -200px;
}



.echartbox {
  width: 300px;
  height: 270px;
  position: fixed;
  background: #071226;
  margin-top: -600px;
  margin-left: 50px;
  pointer-events: none;
  background: rgba(1, 19, 67, 0.8);
  border: 2px solid #00a1ff;
  border-radius: 8px;
  color: #ffffff;
  display: none;
}

.echartbox::before {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  content: "";
  border-top: 2px solid #016886;
  border-bottom: 2px solid #016886;
  z-index: 0;
}
.echartbox::after {
  position: absolute;
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  content: "";
  border-right: 2px solid #016886;
  border-left: 2px solid #016886;
  z-index: 0;
}


.triangle-top {
  width: 0;
  height: 0;
  margin: 8px auto;
  margin-left: 13px;
  margin-right: 8px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 13px solid rgb(214, 37, 37);
}

.triangle-bottom {
  width: 0;
  height: 0;
  margin: 8px auto;
  margin-left: 13px;
  margin-right: 8px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 13px solid rgb(42, 227, 110);
}

</style>
